<template>
  <div class="box">
    <div class="first">
      <img :src="datalist.avatarUrl" alt="">
      <ul class="introduce">
        <li>{{datalist.description}}

        </li>
        <li>{{datalist.nickname}} </li>
        <li>个人介绍:{{datalist.signature}}</li>
      </ul>
    </div>
    <div class="w750">{{data.briefDesc}}</div>

    <el-tabs v-model="activeIndex" class="song-wrap">

      <el-tab-pane label="mv" name="mv">
        <div class="mvs">
          <div class="items">
            <div class="item" v-for="item in mv">
              <div class="img-wrap">
                <img :src="item.imgurl" alt="" @click="toMv(item.id)" />
                <p>{{item.name}}</p>
              </div>

            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="歌手详情" name="details">
        <div v-for="item in data" :key="item.id" class="details">
          <p class="f20 fw700">{{item.ti}}</p>
          <p> {{item.txt}}</p>
        </div>
      </el-tab-pane>
      <el-tab-pane label="相似歌手" name="similar">

        <div class="mvs">
          <div class="items">
            <div class="itemsa" v-for="item in similar" :key="item.id" >
              <div class="img-wrap">
                <img :src="item.img1v1Url" alt="">
              </div>
              <p> {{item.name}}</p>

            </div>
            <div class="d"></div>
          </div>
        </div>

      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { API } from "@/common/constant";
import axios from "axios";
export default {
  data() {
    return {
      datalist: {},
      data: {},
      activeIndex: "song-wrap",
      mv: [],
      similar: [],
    };
  },
  created() {
    // this.$route.query.CA;只能传id 不能传别的
    // console.log("li详情:", this.$route.query.q);
    this.minapi();
  },
  methods: {
    toMv(id) {
      this.$router.push(`/mv2?q=${id}`);
    },
		// handleclick(id){
		// 	console.log(id);
		// 	this.$router.push(`/singer2?q=${id}`);
		// },
    minapi() {
      let id = this.$route.query.q;
      // 介绍
      axios({
        // 请求的地址
        url: `${API}/artist/detail?id=${id}`,
        // 请求的方法
        method: "get",
      }).then((res) => {
        // console.log(res.data.data);
        this.datalist = res.data.data.user;
      });
      // mv
      axios({
        url: `${API}/artist/mv?id=${id}`,
        method: "get",
      }).then((res) => {
        // console.log(res.data.mvs);
        this.mv = res.data.mvs;
      });
      // 歌手详情
      axios({
        url: `${API}/artist/desc?id=${id}`,
        method: "get",
      }).then((res) => {
        console.log(res);
        this.data = res.data.introduction;
      });
      // 相似歌手
      axios({
        url: `${API}/simi/artist?id=${id}`,
        method: "get",
      }).then((res) => {
        console.log(res.data.artists[0].id);
        this.similar = res.data.artists;
      });
    },
  },
};
</script>

<style scoped>
.box {
  position: absolute;
  top: 130px;
  left: 200px;
}
.box img {
  width: 200px;
  height: 200px;
}
li {
  list-style: none;
}
.first {
  display: flex;
}
.first .introduce {
  padding-left: 10px;
}
.w750 {
  width: 750px;
}
.details {
  width: 750px;
}
.f20 {
  font-size: 20px;
}
.fw700 {
  font-weight: 700;
}
.song-wrap {
  width: 1200px;

  font-size: 16px;
}
.mvs .items {
  width: 990px;
  display: flex;
  flex-wrap: wrap;
}
.mvs .items > .item {
  margin: 10px;
  list-style: none;
  width: 310px;
  cursor: pointer;
}
.mvs .items .item img {
  width: 100%;
  cursor: pointer;
}
.s1 {
  font-size: 15px;
}
.black {
  color: gray;
}

.d {
  height: 300px;
}
.paging {
  position: relative;
  left: 270px;
  padding-left: 10px;
  width: 120px;
  z-index: 100000;
  border: 0 #fff solid;
}
.img-wrap {
  position: relative;
}
.img-wrap img {
  border-radius: 10px;
}
.num-wrap {
  position: absolute;
  top: 10px;
  right: 20px;
  color: #fff;
}
.mvs .items .itemsa .img-wrap {
  width: 200px;
  height: 200px;
  padding: 10px;
}
</style>